<template>
  <div class="liveDataWrap classMain">
    <NavBar
      :title="'实况数据'"
      :text="'返回'"
      :cityName="cityName"
     :areaName="areaName"
      @clicksPopul="clicksPopul"
      :SeveralMenus="'1'"
    ></NavBar>
    <div class="newContentArea">
      <div
        id="map1"
        style="width: 100%; height: 100%; position: absolute"
      ></div>
      <div class="dropdown">
        <div class="select" @click="selectclick">
          <van-icon
            v-if="!selectshow"
            style="float: left; font-size: 15px; line-height: 40px"
            name="arrow-up"
          />
          <van-icon
            v-else
            name="arrow-down"
            style="float: left; font-size: 15px; line-height: 35px"
          />
          <span style="float: left">{{ selecttext }}</span>
        </div>
        <div class="selectlist" v-if="selectshow == true">
          <div class="wendulist">
            <ul>
              <li
                :class="index == active ? 'actives' : ''"
                v-for="(item, index) in selectlist"
                @click="clickfather(item, index)"
                :key="index"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
        </div>

        <div class="wendulistsun" v-if="selectactivesun">
          <ul>
            <li
              :class="index == activesun ? 'activesun' : ''"
              v-for="(it, index) in selectlistsun"
              :key="index"
              @click="clicksun(it, index)"
            >
              {{ it.name }}
            </li>
          </ul>
        </div>
      </div>

      <div class="wangge" id="wangge1" @click="wangge">
        <img src="../assets/weaWangGe.png" alt="" />网格实况
      </div>
    </div>
    <van-action-sheet
      v-model="showActionSheet"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="showActionSheet = false"
      @select="onSelect"
    />
    <comArea
      v-if="showArea"
      @closeEmit="closeAreaMet"
      @confirmEmit="confirmEmitMet"
    >
    </comArea>
    <comCity
      v-if="showComCity"
      @confirmEmit="confirmEmitCityMet"
      @closeEmit="showComCity = false"
      :arr="arr"
    ></comCity>
  </div>
</template>
<script>

import ldTrendChartOpt from "../components/mixins/ldTrendChartOpt.js";
import area from "@/components/mixins/area.js";

import comArea from "@/components/common/area.vue";

import meteoroLiveDataApi from "@/service/liveData.js";
import comCity from "@/components/common/city.vue";
import Vue from "vue";
import dwimg from "../assets/liveData/dw.png";
import { getItem, setItem } from "../util/storage.js";
import map from "@/util/map.js";

import {
  Tab,
  Tabs,
  Popover,
  ActionSheet,
  DropdownMenu,
  DropdownItem,
} from "vant";

Vue.use(Popover);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(ActionSheet);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
export default {
  mixins: [ldTrendChartOpt, area],
  data() {
    return {
      active: 0,
      topActive: 0,
      //   , { name: '市区级' }
      actions: [{ name: "市级" }],
      weatherInfo: {},
      active: "",
      formatWordTime: {},
      showEcharts: false,
      showActionSheet: false,
      map1: null,
      dwimg: dwimg,
      clearzidong: [],
      activesun: "",
      selecttext: "气温",
      selectshow: false,
      showComCity: false,
      cityName: "",
      guojialist: [],
      selectlist: [
        {
          name: "气温",
        },
        {
          name: "风",
          children: [
            {
              name: "10分钟平均风速",
            },

            {
              name: "极大风速",
            },
          ],
        },

        {
          name: "相对湿度",
        },
        {
          name: "降水量",
        },
        {
          name: "气压",
        },
      ],
      arr: [],
      selectlistsun: [],
      zidonglist: [],
      selectactivesun: false,
      guojiatrue: true,
      jwd: [],
      elMarker1: [],
      popupInfoWindow: null,
      location: [],
      clearStation: [],
      Marker: [],
      areaName: "",
    };
  },
  components: {
    comCity,
  },
  destroyed: function () {
    this.map1.remove();
    // 离开页面生命周期函数
    // this.websocketclose()
  },
  created() {
    var _this = this;

    map.init().then((res) => {
      _this.areaName = "";
      _this.zoom = 8;
      var location = getItem("location");
      _this.cityName = location[1].name;

      _this.initmap(
        [
          this.$store.getters.cityLongAndLati[0],
          this.$store.getters.cityLongAndLati[1],
        ],
        "one"
      );
      (_this.location = [
        this.$store.getters.cityLongAndLati[0],
        this.$store.getters.cityLongAndLati[1],
      ]),
        _this.$store.dispatch("setCityLongAndLati", _this.location);
    });
  },

 
  beforeDestroy() {},
  methods: {
    clickfather(item, index) {
      this.activesun = 0;
      if (item.children != undefined) {
        this.selectlistsun = item.children;
        this.selectactivesun = true;

        this.selecttext = this.selectlistsun[0].name;
      } else {
        this.selecttext = item.name;
        this.selectlistsun = [];
        this.selectactivesun = false;
      }
      this.map1.removeImage("pulsing-dot1");
      this.clearStationcity();

      this.active = index;
    },
    //清除站点数据
    clearStationcity() {
      // 缓存this对象
      var _this = this;

      // 移除Marker数组中的元素
      _this.Marker.forEach((it) => {
        it.remove();
      });

      // 移除clearStation数组中的图层和源
      _this.clearStation.forEach((it) => {
        _this.map1.removeLayer(it);
        _this.map1.removeSource(it);
      });

      // 检查elMarker1数组是否为空
      if (_this.elMarker1.length === 0) {
        _this.zhandian();
      } else {
        // 移除elMarker1数组中的元素
        _this.elMarker1.forEach((it) => {
          it.remove();
        });
        _this.zhandian();
      }
    },
    clicksun(item, index) {
      this.activesun = index;
      this.selecttext = item.name;
      this.map1.removeImage("pulsing-dot1");
      this.clearStationcity();
    },
    selectclick() {
      this.selectshow = !this.selectshow;
      //   this.active = 0

      this.selectactivesun = !this.selectactivesun;
    },
    cityonclick() {
      this.arr = [this.cityName];
      this.showActionSheet = true;
    },
    onSelect(item) {
      this.showActionSheet = false;
      if (item.name == "市级") {
        this.showComCity = true;
      } else if (item.name == "市区级") {
        this.showArea = true;
      }
    },
    confirmEmitCityMet(value) {
      var _this = this;
      _this.areaName = "";
      _this.cityName = value;
      _this.arr = [_this.cityName];
      _this.map1.removeImage("pulsing-dot1");
      _this.clearStationcity();
      SGMap.plugin("SGMap.GeocodingTask").then(function (res) {
        var geocodingTask = new SGMap.GeocodingTask();

        geocodingTask
          .getLocation({
            address: `${value}`,
            region: "山西",
            isEncode: false,
          })
          .then(function (result) {
            _this.location = [result.location[0], result.location[1]];

            _this.$util.clears(_this.map1);
            _this.$util.initLayershi(_this.cityName, _this.map1);
            _this.$util.searchshi(_this.cityName, _this.map1);
            //设置中心点
            _this.map1.setCenter(_this.location);
            //设置缩放
            _this.map1.setZoom(7.5);

            // _this.zhandian()
          });
      });
      this.showComCity = false;
    },
    confirmEmitMet(value) {
      var _this = this;

      _this.areaName = value[2].name;
      _this.cityName = value[1].name;
      _this.map1.removeImage("pulsing-dot1");
      _this.clearStationcity();
      SGMap.plugin("SGMap.GeocodingTask").then(function (res) {
        var geocodingTask = new SGMap.GeocodingTask();

        geocodingTask
          .getLocation({
            address: `${value[1].name + value[2].name}`,
            region: "山西",
            isEncode: false,
          })

          .then(function (result) {
            _this.jwd[0] = result.location[0];
            _this.jwd[1] = result.location[1];
            _this.location = [result.location[0], result.location[1]];

            _this.$util.clears(_this.map1);
            _this.$util.initLayershi(_this.areaName, _this.map1);
            _this.$util.searchshi(_this.areaName, _this.map1);
            //设置中心点
            _this.map1.setCenter(_this.location);
            //设置缩放
            _this.map1.setZoom(9.6);

            _this.zhandian();
          });
      });

      _this.showArea = false;
    },
    closeAreaMet() {
      this.showArea = false;
    },
    zhandian() {
      var selecttext = this.selecttext;
      var filterKey = "";

      switch (selecttext) {
        case "气温":
          filterKey = "tem";
          break;
        case "10分钟平均风速":
          filterKey = "win_s_avg_10mi";
          break;
        case "极大风速":
          filterKey = "win_s_inst_max";
          break;
        case "相对湿度":
          filterKey = "rhu";
          break;
        case "降水量":
          filterKey = "pre";
          break;
        case "气压":
          filterKey = "prs";
          break;
        default:
          filterKey = "";
      }

      var params = {
        city: this.cityName,
        stationsCnty: this.areaName,
      };

      meteoroLiveDataApi
        .getSite(params)
        .then((res) => {
          if (filterKey !== "") {
            res = res.filter((it) => it[filterKey] !== undefined);
            this.guojialist = res;
            this.guojiazhandian();
          }
        })
        .catch((error) => {});
    },

    //国家站点
    guojiazhandian() {
      if (this.popupInfoWindow !== null) {
        this.popupInfoWindow.remove(); 
      }

      var _this = this;
      _this.clearStation = [];
      _this.guojiatrue = !_this.guojiatrue;

      var size = 200;
      var pulsingDot = {
        width: size,
        height: size,
        data: new Uint8Array(size * size * 4),

        onAdd: function () {
          var canvas = document.createElement("canvas");
          canvas.width = this.width;
          canvas.height = this.height;
          this.context = canvas.getContext("2d");
        },

        render: function () {
          var duration = 1000;
          var t = (performance.now() % duration) / duration;

          var radius = (size / 2) * 0.3;
          var outerRadius = (size / 2) * 0.7 * t + radius;
          var context = this.context;

          // 画圆
          context.clearRect(0, 0, this.width, this.height);
          context.beginPath();
          context.arc(
            this.width / 2,
            this.height / 2,
            outerRadius,
            0,
            Math.PI * 2
          );
          context.fillStyle = "rgba(0, 252, 255," + (1 - t) + ")";
          context.fill();

          // 画线
          context.beginPath();
          context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2);
          context.fillStyle = "rgba(0, 252, 255, 1)";
          context.strokeStyle = "rgba(0, 252, 255, 1)";
          context.lineWidth = 2 + 4 * (1 - t);
          context.fill();
          context.stroke();

          this.data = context.getImageData(0, 0, this.width, this.height).data;
          _this.map1.triggerRepaint();

          return true;
        },
      };
      // 创建一个映射关系，将选择文本与属性名称和单位对应起来
      const textToPropertyMap = {
        极大风速: { property: "win_s_inst_max", unit: "m/s" },
        "10分钟平均风速": { property: "WIN_D_Avg_10mi", unit: "m/s" },
        最大风速: { property: "WIN_D_S_Max", unit: "m/s" },
        气温: { property: "tem", unit: "℃" },
        气压: { property: "prs", unit: "Pa" },
        相对湿度: { property: "rhu", unit: "%RH" },
        降水量: { property: "pre", unit: "mm" },
      };

      // 根据选择文本获取属性信息
      const selectedProperty = textToPropertyMap[_this.selecttext];

      // 添加图像
      _this.map1.addImage("pulsing-dot1", pulsingDot, {
        pixelRatio: selectedProperty ? 9 : 8,
      });

      if (_this.guojialist === undefined) {
        return;
      }

      for (let i = 0; i < _this.guojialist.length; i++) {
        _this.clearStation.push(`gjz-${i}`);

        _this.map1.addLayer({
          id: `gjz-${i}`,
          type: "symbol",
          source: {
            type: "geojson",
            data: {
              type: "FeatureCollection",
              features: [],
            },
          },
          layout: {
            "icon-image": `pulsing-dot1`,
            "icon-size": 1,
            // "icon-anchor":"bottom",
            //"icon-offset":[0,0],
            "icon-ignore-placement": true,
            "text-ignore-placement": false,
            "text-field": "{name}",
            "text-size": 12,
            "text-anchor": "top",
            "text-allow-overlap": false,
            "icon-anchor": "bottom",
            "text-offset": [0, 0],
            "text-max-width": 8,

            "text-font": ["Microsoft YaHei Regular"],
          },
          paint: {
            "text-color": "#555252",
            "text-halo-color": "#FFFFFF",
            "text-halo-width": 1.33333,
          },
        });

        _this.map1.getSource(`gjz-${i}`).setData({
          type: "FeatureCollection",
          features: [
            {
              type: "Feature",
              geometry: {
                type: "Point",
                coordinates: [_this.guojialist[i].lon, _this.guojialist[i].lat],
              },
              properties: {
                name: `${_this.guojialist[i].name}`,
              },
            },
          ],
        });

        var el = document.createElement("div");
        var canvas = document.createElement("div");
        el.className = "marker";

        if (_this.selecttext == "气温") {
          el.innerHTML = `${
            _this.guojialist[i].tem == undefined
              ? "--"
              : _this.guojialist[i].tem
          }℃`;
        } else if (_this.selecttext == "气压") {
          el.innerHTML = `${
            _this.guojialist[i].prs == undefined
              ? "--"
              : _this.guojialist[i].prs
          }Pa`;
        } else if (_this.selecttext == "相对湿度") {
          el.innerHTML = `${
            _this.guojialist[i].rhu == undefined
              ? "--"
              : _this.guojialist[i].rhu
          }%RH`;
        } else if (_this.selecttext == "降水量") {
          el.innerHTML = `${
            _this.guojialist[i].pre == undefined
              ? "--"
              : _this.guojialist[i].pre
          }mm`;
        } else if (_this.selecttext == "最大风速") {
          // _this.guojialist[i].WIN_D_S_Max
          el.innerHTML = `--m/s`;
        } else if (_this.selecttext == "极大风速") {
          el.innerHTML = `${
            _this.guojialist[i].win_s_inst_max == undefined
              ? "--"
              : _this.guojialist[i].win_s_inst_max
          }m/s`;
        } else if (_this.selecttext == "10分钟平均风速") {
          el.innerHTML = `${
            _this.guojialist[i].win_s_avg_10mi == undefined
              ? "--"
              : _this.guojialist[i].win_s_avg_10mi
          }m/s`;
        }

        el.style.display = "inline-block";
        el.style.height = "15px";
        el.style.top = "-20px";
        el.style.color = "#fff";
        el.style.padding = "2px";
        el.style.backgroundColor = "#f37045";
        el.style.textAlign = "center";
        el.style.lineHeight = "15px";
        canvas.style.background = `url("${dwimg}") no-repeat`;
        canvas.style.width = "25px";
        canvas.style.height = "25px";
        canvas.style.backgroundSize = "cover";
        canvas.style.top = "3px";
        canvas.style.transform = "rotate(60deg)";

        var elMarker = new SGMap.Marker({
          element: el,
          anchor: "bottom",
          //   rotation: 45,
        })
          .setLngLat([_this.guojialist[i].lon, _this.guojialist[i].lat])
          .addTo(_this.map1);

        if (_this.selecttext == "极大风速") {
          if (_this.guojialist[i].win_d_inst_max < 9999) {
            var elMarker1 = new SGMap.Marker({
              element: canvas,
              anchor: "bottom",
              rotation: _this.guojialist[i].win_d_inst_max,
            })
              .setLngLat([_this.guojialist[i].lon, _this.guojialist[i].lat])
              .addTo(_this.map1);
            _this.elMarker1.push(elMarker1);
          }
        } else if (_this.selecttext == "10分钟平均风速") {
          if (_this.guojialist[i].WIN_D_Avg_10mi < 9999) {
            var elMarker1 = new SGMap.Marker({
              element: canvas,
              anchor: "bottom",
              rotation: _this.guojialist[i].WIN_D_Avg_10mi,
            })
              .setLngLat([_this.guojialist[i].lon, _this.guojialist[i].lat])
              .addTo(_this.map1);
            _this.elMarker1.push(elMarker1);
          }
        } else if (_this.selecttext == "最大风速") {
          var elMarker1 = new SGMap.Marker({
            element: canvas,
            anchor: "bottom",
            rotation: _this.guojialist[i].WIN_D_S_Max,
          })
            .setLngLat([_this.guojialist[i].lon, _this.guojialist[i].lat])
            .addTo(_this.map1);
          _this.elMarker1.push(elMarker1);
        }

        _this.Marker.push(elMarker);
      }
    },

    initmap(location, one) {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      var _this = this;

      // 1. 新版底图只支持SDK 3.0.0 以上版本使用，低于 3.0.0 版本请使用  底图样式
      // 2. 如果访问Streets-v2底图提示没有数据权限，请使用Streets底图样式
      _this.map1 = new SGMap.Map({
        // 地图绑定的DOM元素ID
        container: "map1",
        // 地图样式
        style: "aegis://styles/aegis/Streets-v2",
        // 默认缩放层级
        zoom: 8,
        // 地图中心点
        center: location,
        // 地图默认字体
        localIdeographFontFamily: "Microsoft YoHei",
      });

      _this.map1.on("load", function (e) {
        _this.$util.initLayershi("", _this.map1);
        _this.$util.searchshi(_this.cityName, _this.map1);
        // // 添加风场图层
        // var windLayer = new SGMap.Windy({
        //   map: _this.map1, // 设置地图实例
        //   data: windData, // 设置风场数据
        //   colorScheme: 'jet', // 设置风场颜色方案
        // })
        // 渲染风场图层
        // windLayer.render()
        _this.guojiatrue = true;
        _this.areaName = "";
        _this.zhandian();
        _this.$toast.clear();
      });
    },

    wangge() {
      this.$router.push({
        path: "wangge",
        params: {
          areaName: this.areaName,
        },
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.showArea = true;
    },
    onChange(index) {
      this.$toast(index);
    },
    clicksPopul() {
      this.showComCity = true;
    },
  },
  
};
</script>
<style type="text/css" lang="less" scoped>
.liveDataWrap {

  .rights {
    color: #fff;
  }
  .rights1 {
    color: #fff;
    margin-right: 10px;
  }
  /deep/.sgmap-popup-tip {
    border-top-color: #fff !important ;
    color: transparent !important;
  }
  /deep/ .sgmap-popup-content {
    border-radius: 15px !important;
    padding: 0 !important;

    background: #ffff !important;
    color: black !important;
    overflow: visible !important;
  }
  /deep/ .sgmap-popup-close-button {
    top: 0 !important;
    width: 20px !important;
    height: 20px !important;
    background: transparent !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    right: 0px !important ;
    z-index: 99999 !important;
    color: black !important;
    font-size: 16px !important;
  }

  .topBgPic {
    width: 100%;
    height: 100%;
  }
  /deep/ .sgmap-canvas {
    width: 100%;
    height: 100%;
  }
  /deep/ .sgmap-map {
    width: 100%;
    height: 100%;
  }
  .newContentArea {
    position: absolute;
    width: 100%;
    height: 100%;

    box-sizing: border-box;
    .zhandian {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      font-size: 11px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;

      top: 50%;
      left: 0;
      width: 55px;
      height: 55px;
      z-index: 88;
      background: #357cff;
      box-shadow: 0px 0px 15px 0px rgba(53, 124, 255, 0.6);
      border-radius: 10px;
      img {
        width: 20px;
        height: 20px;
        margin-bottom: 3px;
      }
    }
    .dropdown {
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 11px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      .select {
        display: flex;
        align-items: center;
        padding: 8px;
        justify-content: space-between;
        height: 35px;
        background: #ffffff;
        box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        color: #0198c7;
        /deep/ .van-icon {
          font-size: 15px;
          margin-right: 5px;
        }
      }
      .selectlist {
        display: flex;

        .wendulist {
          width: 100px;
          margin-top: 8px;
          background: #ffffff;
          box-shadow: 0px 0px 15px 0px rgba(222, 222, 222, 0.36);
          border-radius: 8px;
          ul {
            li {
              padding: 8px;
              //   border-bottom: 1px solid #f4f4f4;
            }
          }
          .actives {
            color: #0198c7;
          }
        }
      }
      .wendulistsun {
        position: absolute;
        width: 150px;
        left: 110px;
        top: 44px;
        background: #ffffff;
        box-shadow: 0px 0px 15px 0px rgba(222, 222, 222, 0.36);
        border-radius: 8px;
        ul {
          li {
            padding: 8px;
            // border-bottom: 1px solid #f4f4f4;
          }
        }
        .activesun {
          color: #0198c7;
        }
      }
    }
    .wangge {
      position: absolute;

      flex-direction: column;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 11px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      z-index: 88;
      top: 35%;
      right: 5px;
      width: 55px;
      height: 55px;
      background: #357cff;
      box-shadow: 0px 0px 15px 0px rgba(53, 124, 255, 0.6);
      border-radius: 10px;
      img {
        width: 20px;
        height: 20px;
        margin-bottom: 3px;
      }
    }
    .guojia {
      top: 20%;
    }
    .zidong {
      top: 30%;
    }
    .titleArea {
      position: relative;
      left: 0;
      top: 0;

      img {
        width: 100%;
      }

      .titleCon {
        position: absolute;
        top: 6px;
        .px2rem(left, 25px);
        color: white;
        font-size: 16px;
        font-weight: bold;
      }

      .pageTextStyle {
        position: absolute;
        left: 0;
        right: 0;
        top: 20px;
        font-size: 12px !important;
      }

      .pageTextStyleTow {
        position: absolute;
        left: 0;
        right: 0;
        top: 80px;
      }
    }
  }

  .tabbarAndChartsArea {
    position: absolute;
    left: 0;
    right: 0;
    top: 170px;
    width: 100%;
    // height: 390px;
    // height: 50%;

    background-color: white;
    padding: 10px 10px 10px;
    border-radius: 20px;
    box-sizing: border-box;
  }

  .baseInfoArea {
    padding: 20px;

    .baseLine {
      overflow: hidden;
      font-size: 16px;
      padding-bottom: 14px;
      color: white;
    }

    .baseLine:last-child {
      padding-bottom: 0;
    }

    .baseLineLeft {
      float: left;
      width: 45%;
    }

    .baseLineRight {
      float: left;
      width: 55%;
    }

    .baseLineImg {
      width: 18px;
      vertical-align: middle;
      margin-right: 5px;
    }

    .colorCon {
      vertical-align: middle;
    }

    .colorLiner {
      vertical-align: middle;
    }
  }

  .topTabbarArea {
    .vanSelfTabs img {
      width: 20px;
      margin-right: 3px;
      vertical-align: middle;
    }

    .van-tab--active {
      color: #1989fa;
    }

    .van-tabbar--fixed {
      position: relative;
      left: 0;
      top: 0;
    }

    .van-tabbar,
    .van-tabbar-item--active {
      border-radius: 10px;
    }
  }

  .contentArea {
    margin: 0 10px;
    padding: 30px 10px;
    background: white;
    //box-sizing:border-box;
    .px2rem(height, 368px);
    width: auto;
    overflow: scroll;
    position: relative;
    left: 0;
    top: 0;
  }

  .contentAreaActive {
    padding: 20px 10px;
    .px2rem(height, 428px);
    border-radius: 5px;
    overflow: hidden;
  }

  .echartsLive {
    margin-top: 20px;
    padding: 0 20px;
    font-size: 14px;
    color: #646566;

    .echartsName {
      position: absolute;
      top: 15%;
      color: #333;
      font-weight: bold;
    }
  }

  .echartsSelfStyle {
    height: 270px;
  }

  .LiveDatabottomTabbar {
    position: absolute;
    .px2rem(left, 20px);
    .px2rem(right, 20px);
    top: 610px;

    height: 40px;
    overflow: hidden;
    font-size: 18px;
    .leftMyButton {
      float: left;
      padding: 7px;
    }

    .RightMyButton {
      float: right;
      padding: 7px;
    }
  }
}
</style>
